<script setup lang="ts">
import { data } from './data/index'

const handleOpen = (url: string) => {
    window.open(url, '_blank')
}
</script>

<template>
    <div class="utils-container base-container">
        <div class="utils-row">
            <div class="row-card" v-for="item in data" :key="item.id" @click="handleOpen(item.url)">
                <div class="card-img">
                    <img :src="item.icon">
                </div>
                <div class="card-info">
                    <div class="title-text">
                        <strong>{{ item.title }}</strong>
                    </div>
                    <div class="cont-text">{{ item.desc }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.utils-container {
    overflow: auto;
    position: relative;

    .utils-row {
        width: 100%;
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
        padding: 20px;

        .row-card {
            background: rgba(244, 244, 244, 0.02);
            border: 2px solid #282828;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 20px;
            cursor: pointer;
            transition-property: color, background-color, border-color,
                text-decoration-color, fill, stroke, opacity, box-shadow;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 0.5s;
            --size: 40px;

            &:hover {
                border-color: var(--xfxjPrimary);
            }

            .card-img {
                width: var(--size);
                height: var(--size);
                background: rgba(128, 128, 128, .1);
                overflow: hidden;

                >img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

            .card-info {
                width: calc(100% - var(--size));
                height: 100%;
                overflow: hidden;

                .title-text {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: block;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    word-break: break-all;
                }

                .cont-text {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: block;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    word-break: break-all;
                }
            }

        }
    }
}
</style>
